<template>
  <div id="HomeCard" class="HomeCard" >
    <el-row :gutter="10">
      <el-col :span="6">
        <!-- 总销售额 -->
        <HeadCard title="总销售额" style="width: 248px;">
          <template #charts>
            <VChart :options="option1" class="vchart" style="height:230px"></VChart>
          </template>
          <template #footer>
            <span style="padding-right: 4px">日销售额</span
            ><span> $28747987</span>
          </template>
        </HeadCard>
      </el-col>

      <!-- 总访问量 -->
      <el-col :span="6">
        <HeadCard title="总访问量" count="98658" style="width: 248px;">
          <template #charts> 
            <VChart :options="option2" class="vchart"></VChart>
          </template>
          <template #footer>
            <span style="padding-right: 4px">日访问量</span
            ><span class="el-icon-s-custom"> 747987</span>
          </template>
        </HeadCard>
      </el-col>

      <!-- 支付笔数 -->
      <el-col :span="6">
        <HeadCard title="支付笔数" count="9692" style="width: 248px;">
          <template #charts> 
          <VChart :options="option3" class="vchart"></VChart></template>
          <template #footer>
            <span style="padding-right: 4px">日转化率</span><span> 69%</span>
          </template>
        </HeadCard>
      </el-col>

      <!-- 运行活动效果 -->
      <el-col :span="6">
        <HeadCard title="运行活动效果" count="98%" style="width: 248px;">
          <template #charts> 
             <VChart :options="option4" class="vchart"></VChart></template>
          <template #footer>
            <span style="padding-right: 4px">周同比</span>
            <span> 15%</span>
              <span
                class="el-icon-caret-top"
                style="color: #78e08f; font-size: 18px"
              ></span>
            <span style="padding:0  2px 0 12px">日同比</span>
            <span> 8%</span>
            <span
                class="el-icon-caret-bottom"
                style="color: #eb4d4b; font-size: 18px"
              ></span>
          </template>
        </HeadCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomeCard",
  props: {
    // 父传子
  },
  data() {
    const data = [];
    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }
    return {
      option1:{
          
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: [  '电器', '服装','食品', '数码',]
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '0',
            right: '15px',
            bottom: '0',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
           
            {
              name: '电器',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 391, 234, 290, 330, 410]
            },
            {
              name: '服装',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 164, 190, 330, 410]
            },
            {
              name: '食品',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [520, 632,501, 434, 790, 830, 920]
            },
            {
              name: '图书',
              type: 'line',
              stack: 'Total',
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [820, 932, 901, 954, 1290, 1330, 1820]
            }
          ]
      },
      option2: {
           angleAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [2, 4, 6, 1, 3, 2, 1],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ],
        
      },
      option3: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
        },
        grid: {
            top:"10%",
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
        series: [
          {
            data: [120, 100, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      option4: {
          
          polar: {
            center: ['50%', '54%']
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          angleAxis: {
            type: 'value',
            startAngle: 0
          },
          radiusAxis: {
            min: 0
          },
          series: [
            {
              coordinateSystem: 'polar',
              name: 'line',
              type: 'line',
              showSymbol: false,
              data: data
            }
          ],
          animationDuration: 2000
        }
    };
  },
  created() {
    // 实例被创建钩子
  },
  computed: {
    // 计算属性
  },
  components: {
    // 组件引用
    HeadCard: () => import("./HeadCard.vue"),
    VChart: ()=> import("./VChart.vue"),

  },
  methods: {
    // 方法
  },
  mounted() {
    // Dom挂载钩子
  },
  watch: {
    // 监测变化
  },
};
</script>
<style scoped >
.HomeCard {
  
 
}
.HomeCard .chart1 {
    padding: 30px 0;
    font-size: 18px;
  }
 .HomeCard .vchart{
     height:200px;
     width:100%;
  }
</style>
